<script setup lang="ts">
import { onMounted } from 'vue';

defineProps<{
}>()

onMounted(() => {
    document.querySelector('.desktop')?.addEventListener('mouseup', (e:any) => {
		console.log(e)
        const popMenu = document.querySelector('.menu')
		// debugger
        if(e?.button === 2){
            popMenu?.setAttribute('style', `left:${e.pageX}px;top:${e.pageY}px;display:block;`)
		}else{
			popMenu?.setAttribute('style', `display:none;`);
		}
    })
})

</script>

<template>
  		<div class="pop-menu">
			<div class="menu" style="display: none;">
				<div class="item">
				<div class="text">查看<span>»</span></div>
				<div class="childs">
					<div class="item"><div class="text">大图标</div></div>
					<div class="item"><div class="text">中等图标</div></div>
					<div class="item"><div class="text">小图标</div></div>
				</div>
			</div>
			<div class="item">
				<div class="text">排序方式<span>»</span></div>
				<div class="childs">
					<div class="item"><div class="text">名称</div></div>
					<div class="item"><div class="text">大小</div></div>
					<div class="item"><div class="text">项目类型</div></div>
				</div>
			</div>
			<div class="item">
				<div class="text">刷新</div>
			</div>
			</div>
		</div>
</template>

<style scoped>
	.pop-menu {
		/* position: absolute; */
		/* width: 100%;
		height: 100%; */
		/* background-color: ; */
	}
	.pop-menu .menu {
		width: 8em;
		height: auto;
		
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
		border: 1px solid #ccc;
		background-color: #fff;
		box-shadow: 0 0 5px #ccc;
		/* padding: 0.5em; */
		border-radius: 0.3em
	}
	.pop-menu .menu .item{
	    cursor: pointer;
		
		/* padding: 0.1em; */
		/* background-color: #ccc; */
		border-radius: 0.5em;
		margin:0.1em 0;
	}
	.pop-menu .menu .item:hover {
		background-color: #eceaea;
	}
	.pop-menu .menu .item .text {
		padding: 0.5em;
	}
	.pop-menu .menu .item .text span {
		float: right;
	}
	.pop-menu .menu .item .childs {
		width:10em;
		position: absolute;
		left: 100%;
		z-index: 999;
		border: 1px solid #ccc;
		background-color: #fff;
		box-shadow: 0 0 5px #ccc;
		/* padding: 0.5em; */
		border-radius: 0.3em;
		margin-top: -2.7em;
		display: none;
	}
	.pop-menu .menu .item:hover .childs {
		display: block;
	}
</style>